<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" href="${pageContext.request.contextPath }/bootstrap/img/favicon.ico">
<link href="${pageContext.request.contextPath }/bootstrap/css/style.min.css?v=4.0.0" rel="stylesheet">
<link href="${pageContext.request.contextPath }/bootstrap/css/animate.min.css" rel="stylesheet">
<link href="${pageContext.request.contextPath }/bootstrap/css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
<link href="${pageContext.request.contextPath}/bootstrap/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
<link href="${pageContext.request.contextPath }/bootstrap/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/bootstrap/css/jquery-confirm.css"/>
<title>反馈信息</title>
</head>
<body>
	<div class="panel panel-default">
	    <div class="panel-body form-group" style="margin-top: 0px;">
	        <label class="col-sm-1 control-label" style="text-align: right; margin-top:5px">反馈信息来源：</label>
	        <div class="col-sm-2">
	            <select class="form-control" name="type" id="type">
					<!-- <option value="0">全部</option> -->
					<option value="1">病人android端</option>
					<option value="2">医生android端</option>
					<option value="3">病人IOS端</option>
					<option value="4">医生IOS端</option>
					<option value="5">医院WEB端</option>
				</select>
	        </div>
	        <label class="col-sm-1 control-label" style="text-align: right; margin-top:5px">是否查看过：</label>
	        <div class="col-sm-2">
	            <select class="form-control" name="check" id="check">
					<option value="">全部</option>
					<option value="true">查看过</option>
					<option value="false">未查看过</option>
				</select>
	        </div>
	        <div class="col-sm-1 control-label">
	            <button class="btn btn-primary" id="search_btn">查询</button>
	        </div>
	    </div>
	</div>
	<!-- 动态加载table -->
	<table id="feedbacktab" class="table table-hover"></table>
	
	<script src="${pageContext.request.contextPath }/bootstrap/js/jquery.min.js?v=2.1.4"></script>
    <script src="${pageContext.request.contextPath }/bootstrap/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath }/bootstrap/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="${pageContext.request.contextPath }/bootstrap/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
    <script src="${pageContext.request.contextPath }/bootstrap/js/jquery-confirm.js"></script>
    <script type="text/javascript">
	  //根据窗口调整表格高度
	    $(window).resize(function() {
	        $('#feedbacktab').bootstrapTable('resetView', {
	            height: tableHeight()
	        })
	    })
	    //查询按钮事件
	    $('#search_btn').click(function(){
	        //$('#doctortab').bootstrapTable('refresh');
	        $('#feedbacktab').bootstrapTable('refresh',{url: '${pageContext.request.contextPath}/Main/FeedBackMan/feedbackListAjax.action'});
	    })
	    //tableHeight函数
	    function tableHeight(){
	        //可以根据自己页面情况进行调整
	        return $(window).height()-220;
	    }
	  	function refreshTab(){
	  		$('#feedbacktab').bootstrapTable('refresh');
	  	}
		//生成用户数据
	    $('#feedbacktab').bootstrapTable({
	        method: 'get',
	        contentType: "application/x-www-form-urlencoded",//必须要有！！！！
	        url:"${pageContext.request.contextPath}/Main/FeedBackMan/feedbackListAjax.action",//要请求数据的文件路径
	        height:tableHeight(),//高度调整
	        striped: true, //是否显示行间隔色
	        dataField: "rows",//bootstrap table 可以前端分页也可以后端分页，这里
	        //我们使用的是后端分页，后端分页时需返回含有total：总记录数,这个键值好像是固定的  
	        //rows： 记录集合 键值可以修改  dataField 自己定义成自己想要的就好
	        pageNumber: 1, //初始化加载第一页，默认第一页
	        pagination:true,//是否分页
	        queryParamsType:'limit',//查询参数组织方式
	        queryParams:function(params) {//自定义参数，这里的参数是传给后台的，我这是是分页用的    
	            return {//这里的params是table提供的    
	                offset : params.offset,//从数据库第几条记录开始    
	                limit : params.limit,
	                type:$("#type").val(),
	                check:$("#check").val()
	            //找多少条    
	            };},//请求服务器时所传的参数
	        sidePagination:'server',//指定服务器端分页
	        pageSize:10,//单页记录数
	        pageList:[1,5,10,30,50,100],//分页步进值
	        showRefresh:true,//刷新按钮
	        showColumns:true,
	        clickToSelect: true,//是否启用点击选中行
	        toolbarAlign:'right',//工具栏对齐方式
	        buttonsAlign:'right',//按钮对齐方式
	        toolbar:'#toolbar',//指定工作栏
	        columns:[
	            {
	                title:'全选',
	                field:'select',
	                //复选框
	                checkbox:true,
	                width:25,
	                align:'center',
	                valign:'middle'
	            },
	            {
	                title:'反馈信息ID',
	                field:'feedbackid'
	            },
	            {
	                title:'反馈时间',
	                field:'feedbacktime'
	            },
	            {
	                title:'反馈读取时间',
	                field:'feedbackchecktime',
	                formatter:function TIME(value,row,index){
	                	if(value=="null"){
	                		return "无读取时间";
	                	}else{
	                		return value;
	                	}
	                }
	            },
	            {
	                title:'反馈信息是否已读',
	                field:'feedbackischeck',
	                formatter:function CHECK(value,row,index){
	                	if(value=="true"){
	                		return "已读";
	                	}else if(value=="false"){
	                		return "未读 ";
	                	}
	                }
	            },
	            {
	                title:'反馈端',
	                field:'feedbacktype',
	                formatter:function TYPE(value,row,index){
	                	if(value=="1"){
	                		return "病人android端";
	                	}else if(value=="2"){
	                		return "医生android端";
	                	}else if(value=="3"){
	                		return "病人IOS端";
	                	}else if(value=="4"){
	                		return "医生IOS端";
	                	}else if(value=="5"){
	                		return "医院WEB端";
	                	}else{
	                		return "未填写";
	                	}
	                }
	            },
	            {
	                title:'反馈信息内容',
	                field:'feedbackidea'
	            },
	            {
	                title:'操作',
	                field:'operate',
	              	//列数据格式化
	                formatter:operate
	            },
	        ],
	        locale:'zh-CN',//中文支持,
	        responseHandler:function(rows){
	            //在ajax获取到数据，渲染表格之前，修改数据源
	            return rows;
	        }
	    })
	    //操作序列规则化
		function operate(value,row,index){
			if(row.feedbackischeck=="true"){
				return '<button class="btn btn-primary" style="height:30px" onclick="Details()">详情</button>';
			}else if(row.feedbackischeck=="false"){
				return '<button class="btn btn-primary" style="height:30px" onclick="Details()">详情</button>&nbsp;&nbsp;<button class="btn btn-info" id="read'+row.feedbackid+'" style="height:30px" onclick="Read('+row.feedbackid+')">读取</button>';
			}
		}
		function Read(feedbackid){
			$.confirm({
			    title: '提示!',
			    content: '你确定读取消息？',
			    type: 'blue',
			    typeAnimated: true,
			    buttons: {
			    	确定: function () {
			    		$("#read"+feedbackid).html('<i class="fa fa-spinner fa-spin"></i>处理中...');
			    		$("#read"+feedbackid).prop('disabled',true);
			    		$.ajax({
			        		type:'post',
			        		url:"${pageContext.request.contextPath}/Main/FeedBackMan/readfeedbackinfo.action",
			        		data:"feedbackid="+feedbackid,
			        		async: true,
			        		success:function(data){
			        			$("#read"+feedbackid).html('读取');
		    		    		$("#read"+feedbackid).prop('disabled',false);
			        			$.alert(data.msg);
			        			if(data.code==100){
			        				refreshTab();
			        			}
			        		},error:function(request){
			        			$.alert("向服务器请求失败！");
			        			$("#read"+feedbackid).html('读取');
		    		    		$("#read"+feedbackid).prop('disabled',false);
			        		}
			        	})
			    	},
					取消: function () {},
			    }	
			});
		}
	</script>
</body>
</html>